<template>
  <view 
    class="card"
    :class="[
      `card-${variant}`,
      {
        'card-hoverable': hoverable,
        'card-clickable': clickable,
        'card-loading': loading
      }
    ]"
    :style="cardStyle"
    @click="handleClick"
  >
    <!-- 加载状态 -->
    <view v-if="loading" class="card-loading-overlay">
      <Loading :size="32" />
    </view>
    
    <!-- 卡片头部 -->
    <view v-if="$slots.header || title" class="card-header">
      <slot name="header">
        <view class="card-title-wrapper">
          <text class="card-title">{{ title }}</text>
          <text v-if="subtitle" class="card-subtitle">{{ subtitle }}</text>
        </view>
      </slot>
      
      <view v-if="$slots.extra" class="card-extra">
        <slot name="extra"></slot>
      </view>
    </view>
    
    <!-- 卡片内容 -->
    <view v-if="$slots.default" class="card-body" :class="{ 'card-body-no-padding': noPadding }">
      <slot></slot>
    </view>
    
    <!-- 卡片底部 -->
    <view v-if="$slots.footer" class="card-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import Loading from './Loading.vue';

interface Props {
  title?: string;
  subtitle?: string;
  variant?: 'default' | 'outlined' | 'elevated' | 'filled';
  hoverable?: boolean;
  clickable?: boolean;
  loading?: boolean;
  noPadding?: boolean;
  width?: string | number;
  height?: string | number;
  backgroundColor?: string;
  borderRadius?: string;
}

interface Emits {
  (e: 'click', event: Event): void;
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  subtitle: '',
  variant: 'default',
  hoverable: false,
  clickable: false,
  loading: false,
  noPadding: false,
  width: undefined,
  height: undefined,
  backgroundColor: undefined,
  borderRadius: undefined
});

const emit = defineEmits<Emits>();

const cardStyle = computed(() => {
  const style: Record<string, string> = {};
  
  if (props.width) {
    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
  }
  
  if (props.height) {
    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
  }
  
  if (props.backgroundColor) {
    style.backgroundColor = props.backgroundColor;
  }
  
  if (props.borderRadius) {
    style.borderRadius = props.borderRadius;
  }
  
  return style;
});

const handleClick = (event: Event) => {
  if (props.clickable && !props.loading) {
    emit('click', event);
  }
};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  background-color: var(--color-surface);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
}

.card-default {
  border: 1px solid var(--color-divider);
}

.card-outlined {
  border: 2px solid var(--color-border);
  background-color: transparent;
}

.card-elevated {
  box-shadow: var(--shadow-md);
  border: none;
}

.card-filled {
  background-color: var(--color-background);
  border: none;
}

.card-hoverable {
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

.card-clickable {
  cursor: pointer;
  
  &:active {
    transform: scale(0.98);
  }
}

.card-loading {
  pointer-events: none;
}

.card-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--spacing-md);
}

.card-title-wrapper {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
  display: block;
}

.card-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-top: var(--spacing-xs);
  display: block;
}

.card-extra {
  margin-left: var(--spacing-md);
  flex-shrink: 0;
}

.card-body {
  padding: var(--spacing-md);
  
  &.card-body-no-padding {
    padding: 0;
  }
}

.card-footer {
  padding: 0 var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
}

// 响应式适配
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }
  
  .card-extra {
    margin-left: 0;
  }
}
</style>